import React from 'react';
import {
  Row,
  Col,
  Table,
} from 'antd';
import axios from 'axios';
import OrderList from './RentStartOrderList';
import intercept from '../../../utils/intercept';
import { config } from 'utils';
import { Input } from 'antd';
import format from './format'
import '../../CustomService/OrderInfo/OrderInfo.less';
export default class OrderInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10
      },
      onChange: this.onChange,
      keyword: ''
    };
  };

  componentDidMount() {
    this.getOrderInfo();
  };

  search(value) {
    this.setState({ keyword: value });
    this.getOrderInfo({ keyword: value });
  }

  onChange = (pagination, filters, sorter) => {
    this.getOrderInfo({
      sortField: sorter.field,
      sortOrder: sorter.order,
      page: pagination.current,
      keyword: this.state.keyword,
      ...filters
    });
  };

  getOrderInfo = (params = {}) => {
    const token = sessionStorage.getItem("token");
    this.setState({ loading: true });
    var keyword = typeof (params.keyword) === "undefined"
      ? ''
      : params.keyword;
    axios
      .get(`${config.api}Rental/GetSendingOrders?page=${params.page}&pageSize=${this.state.pagination.pageSize}&keyword=${keyword}`,{headers:{Authorization:'Bearer ' + token}})
      .then((data) => {
        const pagination = {
          ...this.state.pagination
        };
        pagination.total = data.data.totalRows;
        pagination.current = params.page;
        this.setState({ loading: false, dataSource: data.data.sendingOrders, pagination });

      })
      .catch(err => {
        intercept;
      })
  };

  isState(state){
    if(state == 0){
      return '已分派'
    }else if(state == 1){
      return '分派成功'
    }else{
      return '已撤销'
    }
  }


  render() {
    const Search = Input.Search;
    const statusstr = ['待支付','已支付','已取消','已打印','客服申请退款','客服申请退款成功','超时支付申请退款','超时支付退款成功','用户申请退款','退款成功'];
    const columns = [
      {
        title: '单位',
        dataIndex: 'companyCode',
        width: 150
      }, {
        title: '车牌号',
        dataIndex: 'plateNumber',
        width: 150
      }, {
        title: '司机姓名',
        dataIndex: 'driverName',
        width: 100
      }, {
        title: '派车时间',
        dataIndex: 'sendingTime',
        width: 100,
        render: (text, record) => {
            return (
                <span>{format.format(record.sendingTime)}</span>
            )
        }
      },{
        title: '状态',
        dataIndex: 'sendingOrderStatus',
        width: 100,
        render: (text, record) => {
          return (
            <span>{this.isState(record.sendingOrderStatus)}</span>
          )
        }
      }
    ];
    const className = "components-table-demo-nested";
    const expandedRowRender = record => <OrderList upData={this.getOrderInfo} id={record.id} />; //<p>{record.orderCode}</p>;
    const scroll = {
      y: 600
    };

    return (
      <div className="orderinfo">

        <Row gutter={8} style={{
          marginTop: '20px'
        }}>
          <Col span={24}>
            <div
              style={{
                textAlign: 'center',
                margin: 10
              }}>
              {/* <Search
                placeholder="请输入订单号"
                style={{
                  width: 600
                }}
                onSearch={value => this.search(value)} /> */}

            </div>
            <Table
              rowKey={ record => record.id}
              {...this.state}
              expandedRowRender={expandedRowRender}
              bordered={true}
              className={className}
              columns={columns}
              scroll={scroll} />
          </Col>
        </Row>
      </div>
    )
  }
}
